<template>
    <div class="sjzxBasicDetailContent">
        <Title titles="部门资源条数统计" />
        <div id="sjzxBasicDetailChart1"></div>
        <Title titles="部门资源空间统计" />
        <div id="sjzxBasicDetailChart2"></div>
        <div style="margin-bottom: 10px">资源搜索</div>
        <el-row>
            <el-col :span="10">
                <el-select v-model="currentBM" placeholder="请选择">
                    <el-option
                        v-for="item in bmList"
                        :key="item"
                        :label="item"
                        :value="item"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="10">
                <el-input placeholder="请输入资源名称" v-model="inputVal">
                </el-input>
            </el-col>
            <el-col :span="4">
                <el-button icon="el-icon-search" @click="zySearch"></el-button>
            </el-col>
        </el-row>

        <div class="resultNum">查询结果：共{{ totalNum }}条记录</div>
        <div class="dataList">
            <div
                class="dataListItem"
                v-for="(item, index) in dataList"
                :key="index"
            >
                <div class="itemTop">
                    <span class="order">{{ orderList[index] + 1 }}、</span>
                    <span class="itemName">{{ item.bm }}。</span>
                    <!-- <span class="locationIcon el-icon-location-information"></span> -->
                    <span class="location">资源条数：{{ item.zyts }}</span>
                </div>
                <div class="link">
                    <span class="linkPro">资源名称：</span>
                    <span class="linkContent">{{ item.zymc }}</span>
                </div>
            </div>
        </div>
        <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="prev, pager, next"
            :pager-count="5"
            :total="totalNum"
        >
        </el-pagination>
    </div>
</template>

<script>
import { onMounted, ref } from "vue";
import Title from "./LittleTitle.vue";
import echarts from "echarts";
import axios from "axios";
const bigNumberTransform = (value) => {
    const newValue = ["", "", ""];
    let fr = 1000;
    let num = 3;
    let text1 = "";
    let fm = 1;
    while (value / fr >= 1) {
        fr *= 10;
        num += 1;
        // console.log('数字', value / fr, 'num:', num)
    }
    if (num <= 4) {
        // 千
        newValue[0] = parseInt(value / 1000) + "";
        newValue[1] = "千";
    } else if (num <= 8) {
        // 万
        text1 = parseInt(num - 4) / 3 > 1 ? "千万" : "万";
        // tslint:disable-next-line:no-shadowed-variable
        fm = text1 === "万" ? 10000 : 10000000;
        if (value % fm === 0) {
            newValue[0] = parseInt(value / fm) + "";
        } else {
            newValue[0] = parseFloat(value / fm).toFixed(2) + "";
        }
        newValue[1] = text1;
    } else if (num <= 16) {
        // 亿
        text1 = (num - 8) / 3 > 1 ? "千亿" : "亿";
        text1 = (num - 8) / 4 > 1 ? "万亿" : text1;
        text1 = (num - 8) / 7 > 1 ? "千万亿" : text1;
        // tslint:disable-next-line:no-shadowed-variable
        fm = 1;
        if (text1 === "亿") {
            fm = 100000000;
        } else if (text1 === "千亿") {
            fm = 100000000000;
        } else if (text1 === "万亿") {
            fm = 1000000000000;
        } else if (text1 === "千万亿") {
            fm = 1000000000000000;
        }
        if (value % fm === 0) {
            newValue[0] = parseInt(value / fm) + "";
        } else {
            newValue[0] = parseFloat(value / fm).toFixed(2) + "";
        }
        newValue[1] = text1;
    }
    if (value < 1000) {
        newValue[0] = value + "";
        newValue[1] = "";
    }
    return newValue.join("");
};
export default {
    components: {
        Title,
    },
    setup() {
        let inputVal = ref("");
        let currentPage = ref(1);
        let totalNum = ref(0);
        //部门列表
        let bmList = ref([]);
        let dataList = ref([]);
        const drawChart = (element, xData, yData, danwei, left) => {
            let dom = document.getElementById(element);
            let myChart = echarts.init(dom);
            let option = {
                grid: {
                    left,
                    right: "3%",
                    top: "20%",
                },
                animation: false,
                xAxis: {
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                        rotate: 30,
                    },
                },
                yAxis: {
                    name: `单位:${danwei}`,
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#2d3d53",
                        },
                    },
                    //interval:1000,
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#5ef3ff",
                                        },
                                        {
                                            offset: 1,
                                            color: "#06a4f4",
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                fontSize: 12,
                                color: "#ffffff",
                                position: "top",
                            },
                        },
                        data: yData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        };
        const drawPie = (element, xData, yData) => {
            let dom = document.getElementById(element);
            let myChart = echarts.init(dom);
            let option = {
                tooltip: {
                    rigger: "item",
                    formatter: function (params) {
                        let str = bigNumberTransform(params.data.value);
                        return str;
                    },
                },
                color: ["#3B3BF0", "#000080", "#00BFFF", "#1E90FF"],
                series: [
                    {
                        name: "访问来源",
                        type: "pie",
                        radius: "90%",
                        data: xData,
                        minAngle: 30,
                        label: {
                            color: "rgba(255, 255, 255, 1)",
                        },
                        labelLine: {
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.3)",
                            },
                            smooth: 0.2,
                            length: 1,
                            length2: 2,
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        };

        const handleCurrentChange = (val) => {
            currentChangePage(val);
        };
        //生成连续数字
        const progressiveArray = (start, end) => {
            start = Number(start);
            end = Number(end);
            end = end > start ? end : start;
            return [...Array(end + 1).keys()].slice(start);
        };
        //分页的方法
        let pageSize = 10;
        let orderList = ref([]);
        const currentChangePage = (currentPage) => {
            let from = (currentPage - 1) * pageSize;
            let to = currentPage * pageSize;
            axios
                .get(
                    `http://172.25.110.34/api/emergency-visual/union/v2/subject/yskzytj/page?current=${currentPage}&size=10&bm=${currentBM.value}&zymc=${inputVal.value}`
                )
                .then((res) => {
                    dataList.value = res.data.data.records;
                    totalNum.value = res.data.data.total;
                    orderList.value = progressiveArray(from, to);
                    //console.log(orderList)
                });
        };
        const zySearch = () => {
            axios
                .get(
                    `http://172.25.110.34/api/emergency-visual/union/v2/subject/yskzytj/page?current=1&size=10&bm=${currentBM.value}&zymc=${inputVal.value}`
                )
                .then((res) => {
                    console.log(res.data.data.records);
                    totalNum.value = res.data.data.total;
                    dataList.value = res.data.data.records;
                    orderList.value = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                });
        };
        //select start-----------------
        let showItem = ref(false);
        let currentBM = ref("");
        const handleBMClick = (item) => {
            showItem.value = false;
            currentBM.value = item;
        };
        const showItems = () => {
            showItem.value = !showItem.value;
        };
        //select end
        //-----------------------------
        onMounted(() => {
            //原始库按部门统计<<<<<<<资源条数>>>>>>
            axios
                .post(
                    "http://172.25.110.34/api/emergency-visual/union/v2/subject/scrn-v2-ys-bmzytj/list",
                    {}
                )
                .then((res) => {
                    let vData = res.data.data[0].result;
                    // let xData = vData.map((item)=>{
                    //     return item.bm
                    // })
                    // let yData = vData.map((item)=>{
                    //     return item.ts
                    // })
                    let xData = vData.map((item) => {
                        return { name: item.bm, value: item.ts };
                    });

                    //drawChart("sjzxBasicDetailChart1",xData,yData,"条","22%");
                    drawPie("sjzxBasicDetailChart1", xData);
                });

            //原始库按部门统计资源<<<<<<<占用空间>>>>>>
            axios
                .post(
                    "http://172.25.110.34/api/emergency-visual/union/v2/subject/scrn-v2-ys-bmzykj/list",
                    {}
                )
                .then((res) => {
                    let vData = res.data.data[0].result;
                    let xData = vData.map((item) => {
                        return item.bm;
                    });
                    let yData = vData.map((item) => {
                        return item.kj.indexOf("MB") > -1
                            ? Number(item.kj.slice(0, -2)) / 1000
                            : item.kj.slice(0, -2);
                    });

                    drawChart(
                        "sjzxBasicDetailChart2",
                        xData,
                        yData,
                        "GB",
                        "15%"
                    );
                });
            //获取部门列表
            axios
                .get(
                    "http://172.25.110.34/api/emergency-visual/union/v2/subject/yskzytj/bmlist"
                )
                .then((res) => {
                    bmList.value = res.data.data;
                    currentBM.value = res.data.data[0];
                    axios
                        .get(
                            `http://172.25.110.34/api/emergency-visual/union/v2/subject/yskzytj/page?current=1&size=10&bm=${bmList.value[0]}&zymc=${inputVal.value}`
                        )
                        .then((res) => {
                            console.log(res.data.data.records);
                            totalNum.value = res.data.data.total;
                            dataList.value = res.data.data.records;
                            orderList.value = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                        });
                });
        });
        return {
            inputVal,
            currentPage,
            handleCurrentChange,
            dataList,
            bmList,
            totalNum,
            zySearch,
            orderList,
            currentBM,
            showItem,
            handleBMClick,
            showItems,
        };
    },
};
</script>
<style>
/* body .el-select__popper.el-popper[role=tooltip]{
        background:rgba(0,0,0,.9)
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
        background:rgba(100,100,100,.9)
    } */
</style>
<style scoped>
.dataList::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.dataList::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}
.dataList::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
}
.el-select__popper.el-popper[role="tooltip"] {
    background: transparent !important;
}
.sjzxBasicDetailContent .el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
    color: #000;
}
</style>
<style lang="stylus">
.sjzxBasicDetailContent {
    color: #fff;

    .el-button {
        background: transparent;
        border: 1px solid #00EAFF;
        color: #fff;
    }

    #sjzxBasicDetailChart1 {
        width: vw(340);
        height: vh(170);
        margin-top: vh(10);
    }

    #sjzxBasicDetailChart2 {
        width: vw(340);
        height: vh(170);
        margin-top: vh(10);
    }

    .searchContainer {
        display:flex {
            .el-icon-search {
                line-height: 1;
            }
        }

        .selectModel {
            position: relative;

            .selected {
                width: vw(120);
                height: vh(37);
                line-height: vh(37);
                font-size: vw(12);
                border: 1px solid rgba(23, 208, 255, 0.5);
                border-radius: 3px;
                background: rgba(7, 39, 66, 0.38);
                text-indent: vw(10);
            }

            .selectItems {
                position: absolute;
                top: vh(32);
                width: vw(200);
                height: vh(200);
                border: 1px solid #ddd;
                border-radius: 5px;
                background: rgba(0, 0, 0, 0.8);
                padding: vh(10) vw(10);

                .selectItem {
                    color: #fff;
                    height: vh(30);
                    line-height: vh(30);
                }

                .selectItem:hover {
                    color: #00eaff;
                    background: rgba(0, 0, 0, 0.3);
                }
            }
        }
    }

    .resultNum {
        margin-top: vh(10);
        margin-bottom: vh(10);
    }

    .dataList {
        height: vh(370);
        margin-bottom: vh(10);
        width: vw(360);
        overflow-y: scroll;

        .dataListItem {
            padding-bottom: vh(10);
            padding-top: vh(10);
            padding-left: vw(5);
            border-bottom: 1px dashed #999;

            .itemTop {
                .order {
                    display: inline-block;
                    min-width: vw(20);
                    height: vh(20);
                    margin-right: vw(10);
                    text-align: center;
                    background: #00EAFF;
                    font-size: vw(16);
                    line-height: vh(20);
                    color: #000;
                }

                .itemName {
                    font-size: vw(16);
                    height: vh(20);
                    line-height: vh(20);
                }
            }

            .link {
                text-indent: vw(20);

                .linkPro {
                    font-size: vw(14);
                    height: vh(30);
                    line-height: vh(30);
                }

                .linkContent {
                    font-size: vw(14);
                    height: vh(30);
                    line-height: vh(30);
                }
            }

            .itemBottom {
                text-indent: vw(10);

                .locationIcon {
                    color: #00EAFF;
                    font-size: vw(14);
                    height: vh(18);
                    line-height: vh(18);
                }

                .location {
                    color: #00EAFF;
                    font-size: vw(14);
                    height: vh(18);
                    line-height: vh(18);
                }
            }
        }
    }

    .el-input__inner {
        background: transparent;
        border: 1px solid #00EAFF;
        color: #fff;
        margin-top: 0;
        margin-bottom: 0;
    }

    .el-input-group__append, .el-input-group__prepend {
        background: transparent;
        border: 1px solid #00EAFF;
    }
}
</style>